<template>
  <main>
    <section id="section1">
      <div class="spacer s2"></div>
      <div id="animate1" class="box2 skin">
        <p>You wouldn't like me, when I'm angry!</p>
        <a href="#" class="viewsource">view source</a>
      </div>
      <div class="spacer s2"></div>
    </section>
  </main>
</template>

<script>

export default {
  name: 'IndexPage',
  data() {
    return {
    };
  },
  async asyncData({ context, $axios }) {
  },
  mounted() {
    window.test1 = '123';
    console.log(window.TimelineMax)
    var tween = new TimelineMax()
      .add([
        TweenMax.to("#section1 .layer1", 1, {backgroundPosition: "-40% 0", ease: Linear.easeNone}),
        TweenMax.to("#section1 .layer2", 1, {backgroundPosition: "-500% 0", ease: Linear.easeNone}),
        TweenMax.to("#section1 .layer3", 1, {backgroundPosition: "-225% 0", ease: Linear.easeNone})
      ]);
    var controller = new ScrollMagic.Controller();
    var scene = new ScrollMagic.Scene({triggerElement: "#section1", duration: 2000, offset: 450})
      .setTween(tween)
      .setPin("#section1")
      .addIndicators() // add indicators (requires plugin)
      .addTo(controller);
  },
};
</script>

<style>
  .section1 {
    height: 100vh;
    overflow: hidden;
  }
</style>
